import { Popover, Input } from 'antd';
import icons from '@/components/SlIconSelect/icons';
import style from './index.module.scss';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { StyleContext } from '@/context/style-context.tsx';
import SvgIcon from '@/components/SvgIcon';
import { CloseCircleFilled } from '@ant-design/icons';

interface IconSelectProps {
    value: string;
    onChange?: (value: string) => void; // 关键：添加 onChange 回调函数
    placeholder?: string;
}

const SlIconSelect = ({
    value,
    onChange,
    placeholder = '点击选择图标',
}: IconSelectProps) => {
    const { namespace } = useContext(StyleContext);
    const [realIcons, setRealIcons] = useState<string[]>(icons);
    const [inputWidth, setInputWidth] = useState<number>(0);
    const [realValue, setRealValue] = useState<string>('');
    const popperRef = useRef<any>(null);
    const styleClass = {
        wrapper: `${namespace}-icon-select`,
    };

    const getInputWidth = useCallback(() => {
        if (!popperRef.current) return;
        setInputWidth(popperRef.current.nativeElement.offsetWidth);
    }, [popperRef]);
    useEffect(() => {
        getInputWidth();
    }, [getInputWidth]);
    useEffect(() => {
        if (value !== realValue) {
            setRealValue(value);
        }
    }, [value]);
    const onChangeSearch = (value: any) => {
        const nIcons = icons.filter((icon) => icon.includes(value));
        setRealIcons(nIcons);
    };
    const onChangeIcon = (icon: string) => {
        setRealValue(icon);
        // 调用父组件回调函数
        if (onChange) {
            onChange(icon);
        }
    };
    const renderContent = () => {
        return (
            <div className={style[`${styleClass.wrapper}-content`]}>
                <Input.Search
                    placeholder={'可输入关键字搜索'}
                    onSearch={onChangeSearch}
                ></Input.Search>
                <div className={style[`${styleClass.wrapper}-content-icons`]}>
                    {realIcons.map((icon, index) => {
                        return (
                            <SvgIcon
                                svgClass={
                                    style[
                                        `${styleClass.wrapper}-content-icons-icon`
                                    ]
                                }
                                key={index}
                                iconClass={icon}
                                onClick={() => onChangeIcon(icon)}
                            ></SvgIcon>
                        );
                    })}
                </div>
            </div>
        );
    };
    return (
        <Popover
            ref={popperRef}
            classNames={{
                root: `${style[`${styleClass.wrapper}`]}`,
            }}
            styles={{
                root: {
                    width: `${inputWidth}px`,
                },
            }}
            arrow={false}
            placement={'bottom'}
            trigger={'click'}
            content={renderContent()}
        >
            <Input
                value={realValue}
                placeholder={placeholder}
                readOnly={true}
                allowClear={true}
                classNames={{
                    input: `${style[`${styleClass.wrapper}-input`]}`,
                }}
                prefix={
                    <SvgIcon
                        iconClass={realValue ? realValue : 'icon-system'}
                    ></SvgIcon>
                }
                suffix={
                    <CloseCircleFilled
                        onClick={() => {
                            onChangeIcon('');
                        }}
                    />
                }
            ></Input>
        </Popover>
    );
};

export default SlIconSelect;
